{% import "TopxiaWebBundle::macro.html.twig" as web_macro %}
{% import "TopxiaAdminBundle::macro.html.twig" as admin_macro %}
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta content="{{ csrf_token('site') }}" name="csrf-token" />
  <title>{% block title %}EduSoho主题编辑{% endblock %}</title>
  {% if setting('site.favicon') %}
  <link href="{{ asset(setting('site.favicon')) }}" rel="shortcut icon" />
  {% endif %}
  <link href="{{ asset('assets/libs/gallery2/bootstrap/3.1.1/css/bootstrap.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/css/common.css') }}" rel="stylesheet" />
  <link href="{{ asset('bundles/topxiaadmin/css/admin.css') }}" rel="stylesheet" />
  <link href="{{ asset('bundles/topxiaadmin/css/admin_v2.css') }}" rel="stylesheet" />
  <link rel="stylesheet" media="screen" href="{{ asset('assets/css/bootstrap-extends.css') }}" />
  <link rel="stylesheet" media="screen" href="{{ asset('bundles/topxiaweb/css/web.css') }}" />
  {% block javascripts %}{% endblock %}
  <!--[if lt IE 9]>
    <script src="{{ asset('assets/libs/html5shiv.js') }}"></script>
    <script src="{{ asset('assets/libs/respond.min.js') }}"></script>
  <![endif]-->
</head>

{% set nav = nav|default(null) %}
{% set menu = menu|default(null) %}
{% set script_controller = 'gracefulthemebundle/controller/theme-edit/edit' %}

<body>

<script id="theme-config" type="text/x-handlebars-template">{{ themeConfig|json_encode|raw }}</script>
<script id="theme-all-config" type="text/x-handlebars-template">{{ allConfig|json_encode|raw }}</script>

<nav class="navbar navbar-inverse site-navbar navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="col-md-1"></div>
    <div class="col-md-10"> 
      <a class="navbar-brand">主题编辑</a>
      <ul class="nav navbar-nav navbar-right">
      <li><a href="{{ path('admin_app_installed') }}"><i class="glyphicon glyphicon-remove"></i> 取消</a></li>
      <li><a href="{{ path('admin_confirm_theme_config') }}"><i class="glyphicon glyphicon-ok"></i> 保存</a></li>
      </ul>
    </div>
    <div class="col-md-1"></div>
  </div>
</nav>
<div class="container">
  <div class="col-md-1"></div>
  <div class="col-md-10">
     <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li class="active"><a href="#left" role="tab" data-toggle="tab">左侧</a></li>
      <li><a href="#right" role="tab" data-toggle="tab">右侧</a></li>
      <li><a href="#buttom" role="tab" data-toggle="tab">底部</a></li>
      <li><a href="#color" role="tab" data-toggle="tab">配色方案</a></li>
      <a href="{{ path('admin_reset_theme_config') }}" class="btn btn-primary pull-right">全部重置</a>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content" id="theme-edit-content" data-url="{{ path('admin_save_theme_config') }}">
      <div class="tab-pane active" id="left">
          <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading clearfix">
              <div class="col-md-4 ">
                挂件名称
              </div>
              <div class="col-md-4">
                自定义名称
              </div>

            </div>

            <!-- List group -->
            <ul class="list-group module-item-list theme-edit-block theme-custom-left-block">
              {% for pendant in themeConfig.blocks.left|default([]) %}

                {% include 'GracefulThemeBundle:Theme:theme-edit-config-li.html.twig' with {isChoiced:true} %}
                
              {% endfor %}

              {% for pendant in allConfig.blocks.left|default([]) %}
                {% if not is_exist_in_subarray_by_id(pendant, themeConfig.blocks.left|default([])) %}

                  {% include 'GracefulThemeBundle:Theme:theme-edit-config-li.html.twig' with {isChoiced:false} %}
                
                {% endif %}
              {% endfor %}
            </ul>
          </div>
      </div>

      <div class="tab-pane" id="right">
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading clearfix">
              <div class="col-md-4 ">
                挂件名称
              </div>
              <div class="col-md-4">
                自定义名称
              </div>

            </div>

            <!-- List group -->
            <ul class="list-group module-item-list theme-edit-block theme-custom-right-block">
              {% for pendant in themeConfig.blocks.right|default([]) %}

                {% include 'GracefulThemeBundle:Theme:theme-edit-config-li.html.twig' with {isChoiced:true} %}
                
              {% endfor %}

              {% for pendant in allConfig.blocks.right|default([]) %}
                {% if not is_exist_in_subarray_by_id(pendant, themeConfig.blocks.right|default([])) %}

                  {% include 'GracefulThemeBundle:Theme:theme-edit-config-li.html.twig' with {isChoiced:false} %}
                
                {% endif %}
              {% endfor %}
            </ul>
          </div>
      </div>

      <div class="tab-pane" id="buttom">
        <div class="panel panel-default">
          <form class="panel-body radios theme-custom-bottom-block">
            <label class="col-lg-3 check-box">
              <input type="radio" checked="checked" name="bottom" value="simple" >简洁版
            </label>
            <label class="col-lg-3 check-box">
              <input type="radio" name="bottom" value="complex" >多列表版
            </label>
          </form>
        </div>
      </div>

      <div class="tab-pane" id="color">
        <div class="panel panel-default">
          <form class="panel-body form-inline radios theme-custom-color-block">
            <div class="form-group">
              <div class="col-lg-3">
                <label class="input-group check-box">
                  <span class="input-group-addon">
                    <input type="radio" checked="checked" name="color" value="default">
                  </span>
                  <div class="mod-cpanel-basic-color" data-color-scheme="orange" style="background:#02b980; display:table-cell;height:35px"></div>
                </label>
              </div>

              <div class="col-lg-3">
                <label class="input-group check-box">
                  <span class="input-group-addon">
                    <input type="radio" name="color" value="black">
                  </span>
                  <div class="mod-cpanel-basic-color" data-color-scheme="orange" style="background:#333; display:table-cell;height:35px"></div>
                </label>
              </div>

              <div class="col-lg-3">
                <label class="input-group check-box">
                  <span class="input-group-addon">
                    <input type="radio" name="color" value="blue">
                  </span>
                  <div class="mod-cpanel-basic-color" data-color-scheme="orange" style="background:#0093e8; display:table-cell;height:35px"></div>
                </label>
              </div>
             
              <div class="col-lg-3">
                <label class="input-group check-box">
                  <span class="input-group-addon">
                    <input type="radio" name="color" value="yellow">
                  </span>
                  <div class="mod-cpanel-basic-color" data-color-scheme="orange" style="background:#ffae00; display:table-cell;height:35px"></div>
                </label>
              </div>

            </div>  
          </form>
        </div>


      </div>
    </div>
  </div>
</div>

<div class="mod-preview-mask">
  <iframe src="{{ path('admin_theme_show') }}" marginheight="0" marginwidth="0" frameborder="0" scrolling="no" width="100%" height="100%" id="iframepage" name="iframepage" onload="SetCwinHeight(this)" >
  </iframe>
  <div class="pm-iframe"></div>
</div>

<div class="col-md-1"></div>

  {% include 'TopxiaWebBundle::script_boot.html.twig' with {script_main: asset('bundles/topxiaadmin/js/admin-app.js')} %}

<div id="modal" class="modal"></div>

</body>
</html>


<style>
  .list-group {
    height: 244px;
    overflow:auto;
  }

  #iframepage {

  }
  .mod-preview-mask {
    width: 100%;
    min-height: 100%;
    position: relative;
    border-top: 1px solid #ddd;
  }

  iframe {
    z-index: 1024;
  }

  .radios, .checkboxs {
    padding-top: 20px;
    vertical-align: middle;
  }

  .mod-preview-mask .pm-iframe {
    position: absolute;
    z-index: 1023;
    left: 0;
    top: 0;
    border: none;
    opacity: 0;
    filter: alpha(opacity=0);
    width: 100%;
    height: 100%;
  }

  .mod-cpanel-basic-color {
    width: 85px;
    height: 25px;
    border: 1px solid #aaa;
    cursor: pointer;
  }

  .edit-sort {
    color: #aaa;
    margin-right: 20px;
  }

  .edit-sort:hover {
    color: #444;
  }
</style>

<script>
function SetCwinHeight(obj)
{
  var cwin=obj;
  if (document.getElementById)
  {
    if (cwin && !window.opera)
    {
      if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight)
        cwin.height = cwin.contentDocument.body.offsetHeight + 20; //FF NS
      else if(cwin.Document && cwin.Document.body.scrollHeight)
        cwin.height = cwin.Document.body.scrollHeight + 10;//IE
    }
    else
    {
        if(cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight)
            cwin.height = cwin.contentWindow.document.body.scrollHeight;//Opera
    }
  }
}
</script>